<template>
    <div class="charts-container">
      <el-card class="chart-card" shadow="hover">
        <!-- 用户统计图表 -->
        <div id="userChart" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <!-- 商品统计图表 -->
        <div id="productChart" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <!-- 订单统计图表 -->
        <div id="orderChart" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <!-- 库存统计图表 -->
        <div id="stockChart" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <!-- 库存周转率图表 -->
        <div id="inventoryTurnoverRateChart" style="width: 100%; height: 400px;"></div>
      </el-card>
      <el-card class="chart-card" shadow="hover">
        <!-- 退款率图表 -->
        <div id="refundRateChart" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { ElCard } from 'element-plus';
  
  onMounted(() => {
    initUserChart();
    initProductChart();
    initOrderChart();
    initStockChart();
    initInventoryTurnoverRateChart();
    initRefundRateChart();
  });
  
  function initUserChart() {
    const chart = echarts.init(document.getElementById('userChart'));
    const option = {
      title: {
        text: '用户统计'
      },
      tooltip: {},
      legend: {
        data: ['用户数量']
      },
      xAxis: {
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
      },
      yAxis: {},
      series: [{
        name: '用户数量',
        type: 'line',
        data: [100, 200, 150, 300, 250, 400, 350]
      }]
    };
    chart.setOption(option);
  }
  
  function initProductChart() {
    const chart = echarts.init(document.getElementById('productChart'));
    const option = {
      title: {
        text: '商品流行趋势分析'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['智能手表', '蓝牙耳机', '运动手环', '智能音箱', 'VR眼镜', '游戏机', '平板电脑']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'pie',
        radius: '55%',
        data: [
          {value: 100, name: '智能手表'},
          {value: 150, name: '蓝牙耳机'},
          {value: 300, name: '运动手环'},
          {value: 250, name: '智能音箱'},
          {value: 400, name: 'VR眼镜'},
          {value: 350, name: '游戏机'},
          {value: 500, name: '平板电脑'}
        ]
      }]
    };
    chart.setOption(option);
  }
  
  function initOrderChart() {
    const chart = echarts.init(document.getElementById('orderChart'));
    const option = {
      title: {
        text: '订单统计'
      },
      tooltip: {},
      legend: {
        data: ['订单数量']
      },
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        name: '订单数量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 30]
      }]
    };
    chart.setOption(option);
  }
  
  function initStockChart() {
    const chart = echarts.init(document.getElementById('stockChart'));
    const option = {
      title: {
        text: '库存统计'
      },
      tooltip: {},
      legend: {
        data: ['库存数量']
      },
      xAxis: {
        data: ['智能手表', '蓝牙耳机', '运动手环', '智能音箱', 'VR眼镜', '游戏机', '平板电脑']
      },
      yAxis: {},
      series: [{
        name: '库存数量',
        type: 'bar',
        data: [50, 200, 300, 80, 70, 110, 130]
      }]
    };
    chart.setOption(option);
  }
  
  function initInventoryTurnoverRateChart() {
    const chart = echarts.init(document.getElementById('inventoryTurnoverRateChart'));
    const option = {
      title: {
        text: '库存周转率'
      },
      tooltip: {},
      legend: {
        data: ['周转率']
      },
      xAxis: {
        data: ['一季度', '二季度', '三季度', '四季度']
      },
      yAxis: {},
      series: [{
        name: '周转率',
        type: 'line',
        data: [0.8, 1.2, 0.9, 1.5]
      }]
    };
    chart.setOption(option);
  }
  
  function initRefundRateChart() {
    const chart = echarts.init(document.getElementById('refundRateChart'));
    const option = {
      title: {
        text: '退款率'
      },
      tooltip: {},
      legend: {
        data: ['已退款', '未退款']
      },
      series: [{
        name: '退款率',
        type: 'pie',
        radius: '55%',
        data: [
          {value: 10, name: '已退款'},
          {value: 90, name: '未退款'}
        ]
      }]
    };
    chart.setOption(option);
  }
  </script>
  
  <style scoped>
  .charts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    padding: 20px;
    background-color: #f4f6f9;
  }
  
  .chart-card {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  
  .el-card {
    background-color: #ffffff;
  }
  </style>